<template>
    <el-dialog v-model="drawer" draggable title="添加活动事项" :append-to-body="true" width="980px" @close="close">
        <div class="matter-list">
            <div class="card-body" v-for="(item, index) in list" :key="index">
                <div class="card-title">{{ item.name }}</div>
                <el-divider />
                <div class="tag-list" v-for="(matter, ids) in item.matterItems" :key="ids">
                    <el-tag class="mouse-slide" :type="matter.isOkClick == 1?'':'info'" @click="showMatterForm(matter)">{{ matter.name }}</el-tag>
                </div>
            </div>
        </div>
        <!-- 报告 -->
        <Report v-model:dialogDrawer="REPORTSTATUS" :mark-id="form.id" :code="code" :mark-name="form.name" :matter-data="matterData" @closeModel="MatterClose" ></Report>
        <!-- 方案 -->
        <Scheme v-model:dialogDrawer="SCHENESTATUS" :mark-id="form.id" :code="code" :mark-name="form.name" :matter-data="matterData" @closeModel="MatterClose" ></Scheme>
        <!-- 设计/美工 -->
        <GraphicDesigner v-model:dialogDrawer="GRAPHICSTATUS" :mark-id="form.id" :code="code" :mark-name="form.name" :matter-data="matterData" @closeModel="MatterClose" ></GraphicDesigner>

    </el-dialog>    
</template>

<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Report from '../../matter/common/Report.vue'
import Scheme from '../../matter/common/Scheme.vue'
import GraphicDesigner from '../../matter/common/GraphicDesigner.vue'
import api from '/@/api/commonApi'

export default {
    name: 'ActiveMatter',
    components: {
        Report,
        Scheme,
        GraphicDesigner
    },
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        selectForm: {
            type: Object,
            default() {
                return {}
            }
        },
        matterList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, selectForm, matterList } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            code: "MARKET",
            form: {},
            matterData: {},
            rules: {},
            list: []
        })
        watch(() => dialogDrawer.value,
            val => {
                if (val) {
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    state.form = selectForm.value
                    state.list = matterList.value
                }
            }
        )
        // 报告
        let REPORTSTATUS = ref(false)
        // 方案
        let SCHENESTATUS = ref(false)
        // 设计/美工
        let GRAPHICSTATUS = ref(false)
        // 关闭事项弹窗
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 点击事项弹窗
        const showMatterForm = e => {
            console.log(e)
            if (e.isOkClick == 1) {
                state.matterData = e
                // 这里做一层判断no
                if (e.name === '申请离职') {
                    // 这里就是申请离职
                    itemid.value = e.id
                    LIZHISTATUS.value = true;
                } else if (e.name === '候选人初筛') {
                    itemid.value = e.id
                    chushaiStatus.value = true
                    CHUSHAIDATA.value = true;

                } else if (e.name === '候选人安排面试') {
                    itemid.value = e.id
                    ANPAISTATUS.value = true;
                } else if (e.name === '候选人面试评价') {
                    itemid.value = e.id
                    pingjiaShow.value = true
                    PINGJIASTATUS.value = true;
                } else if (e.name === '候选人笔试记录') {
                    itemid.value = e.id
                    BISHISTATUS.value = true;
                } else if (e.name === '报告') {
                    REPORTSTATUS.value = true
                } else if (e.name === '方案') {
                    SCHENESTATUS.value = true
                } else if (e.name === '设计/美工') {
                    GRAPHICSTATUS.value = true
                } 
            }
        }
        // 关闭事项弹窗，并刷新详情事项列表
        const MatterClose = (e) => {            
            REPORTSTATUS.value = false
            SCHENESTATUS.value = false
            GRAPHICSTATUS.value = false
            // 添加足迹
            api.addMatterLog({
                id: state.form.id,
                name: state.matterData.name
            })
            context.emit('onSubmit')
            close()
        }

        return {
            ...toRefs(state),
            drawer,
            ruleRefForm,
            close,
            showMatterForm,
            REPORTSTATUS,
            SCHENESTATUS,
            GRAPHICSTATUS,
            MatterClose
        }
    }
}

</script>

<style lang="scss" scoped>
.el-form-item {
    align-items: start;
    flex: 1;
}

.matter-list {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;

    .card-body {
        width: 160px;
        min-width: 120px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;

        .card-title {
            font-size: 15px;
            font-weight: bold;
        }

        .tag-list {
            margin-bottom: 15px;

            .mouse-slide {
                cursor: pointer;
            }
        }
    }
}</style>
